<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天气切换</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <span>今天天气{{weather}}-{{X}}</span>
        <button @click = "changeWeather">切换天气</button> <!--绑定事件的时候@click = "XXX" XXX可以是一些简单的计算-->
    </div>
     <script type="text/javascript">
        new Vue({
            el: '#root',
            data: function(){
                return {
                   isHot: true,
                   X:1
                }
            },
            //当读取天气必须触发计算isHot属性的值
            computed:{
                weather:{
                    get(){
                        return this.isHot ? '炎热' : '凉爽'
                    }
                }
            },
            //当点击切换天气时必须触发修改isHot的值 
            methods:{
                changeWeather(){
                    this.isHot = !this.isHot
                    this.X++
                }
            }
        })
     </script>
</body>
</html>